<script setup>
import { ref, watch, shallowRef } from 'vue'
import mitter from '@/utils/eventBus'

import CSLeft from '@/views/new-screen/comprehensive-situation/left/index.vue'
import CSRight from '@/views/new-screen/comprehensive-situation/right/index.vue'
import ZLLeft from '@/views/new-screen/overview-info/left/index.vue'
import ZLRight from '@/views/new-screen/overview-info/right/index.vue'
import AFLeft from '@/views/new-screen/security-info/left/index.vue'
import AFRight from '@/views/new-screen/security-info/right/index.vue'
import FKLeft from '@/views/new-screen/visitor-info/left/index.vue'
import FKRight from '@/views/new-screen/visitor-info/right/index.vue'
import ZCLeft from '@/views/new-screen/asset-info/left/index.vue'
import ZCRight from '@/views/new-screen/asset-info/right/index.vue'
import QYLeft from '@/views/new-screen/area-info/left/index.vue'
import QYRight from '@/views/new-screen/area-info/right/index.vue'
import MapTools from '@/views/new-screen/components/map-tools.vue'
import FloorTools from '@/views/new-screen/components/floor-tools.vue'
import SearchLayer from '@/views/new-screen/components/SearchLayer.vue'

import HouseOverviewL from '@/views/new-screen/info-house-overview/left/index.vue'
import HouseOverviewR from '@/views/new-screen/info-house-overview/right/index.vue'
import HouseDisplayL from '@/views/new-screen/info-house-display/left/index.vue'
import HouseDisplayR from '@/views/new-screen/info-house-display/right/index.vue'
import HouseRentL from '@/views/new-screen/info-house-rent/left/index.vue'
import HouseRentR from '@/views/new-screen/info-house-rent/right/index.vue'
import MarketExchangeL from '@/views/new-screen/info-market-exchange/left/index.vue'
import MarketExchangeR from '@/views/new-screen/info-market-exchange/right/index.vue'
import HouseSecurityL from '@/views/new-screen/info-house-security/left/index.vue'
import HouseSecurityR from '@/views/new-screen/info-house-security/right/index.vue'
import HouseSafetyL from '@/views/new-screen/info-house-safety/left/index.vue'
import HouseSefetyR from '@/views/new-screen/info-house-safety/right/index.vue'
import PropertyManagementL from '@/views/new-screen/info-property-management/left/index.vue'
import PropertyManagementR from '@/views/new-screen/info-property-management/right/index.vue'
import TownshipConstructionL from '@/views/new-screen/info-township-construction/left/index.vue'
import TownshipConstructionR from '@/views/new-screen/info-township-construction/right/index.vue'
import CityUpdateL from '@/views/new-screen/info-city-update/left/index.vue'
import CityUpdateR from '@/views/new-screen/info-city-update/right/index.vue'
// import PublicServiceL from '@/views/new-screen/info-public-service/left/index.vue'
// import PublicServiceR from '@/views/new-screen/info-public-service/right/index.vue'
import constructionOverviewL from '@/views/new-screen/info-construction-overview/left/index.vue'
import constructionOverviewR from '@/views/new-screen/info-construction-overview/right/index.vue'
import constructionProjectsL from '@/views/new-screen/info-construction-projects/left/index.vue'
import constructionProjectsR from '@/views/new-screen/info-construction-projects/right/index.vue'

// 全屏页面
import IndustryDevelopment from '@/views/new-screen/info-industry-development/index.vue'
import QualitySafety from '@/views/new-screen/info-quality-safaty/index.vue'
import IntegrityManagement from '@/views/new-screen/info-integrity-management/index.vue'

const props = defineProps({
  menuActive: String,
  activePark: String,
})

const isLeftExpanded = ref(true)
const isRightExpanded = ref(true)
const isFullscreenExpanded = ref(false)

let floorObj = ref('')

const componentsList = {
  home: {
    left: HouseOverviewL,
    right: HouseOverviewR,
  },
  houseDisplay: {
    left: HouseDisplayL,
    right: HouseDisplayR,
  },
  houseRent: {
    left: HouseRentL,
    right: HouseRentR,
  },
  marketExchange: {
    left: MarketExchangeL,
    right: MarketExchangeR,
  },
  houseSecurity: {
    left: HouseSecurityL,
    right: HouseSecurityR,
  },
  houseSafety: {
    left: HouseSafetyL,
    right: HouseSefetyR,
  },
  propertyManagement: {
    left: PropertyManagementL,
    right: PropertyManagementR,
  },
  townshipConstruction: {
    left: TownshipConstructionL,
    right: TownshipConstructionR,
  },
  cityUpdate: {
    left: CityUpdateL,
    right: CityUpdateR,
  },
  constructionOverview: {
    left: constructionOverviewL,
    right: constructionOverviewR,
  },
  constructionProject: {
    left: constructionProjectsL,
    right: constructionProjectsR,
  },
  industryDevelopment: IndustryDevelopment,
  qualitySafety: QualitySafety,
  integrityManagement: IntegrityManagement,
  wiseConstructionSite: null,
}

const handleArrowChange = (direction) => {
  if (direction === 'left') {
    isLeftExpanded.value = !isLeftExpanded.value
  } else {
    isRightExpanded.value = !isRightExpanded.value
  }
}

const changeExpanded = () => {
  isLeftExpanded.value = true
  isRightExpanded.value = true
}
const currentComponent = shallowRef(componentsList['home'])
const fullscreenComponent = shallowRef(null)

mitter.on('showBuild', (val) => {
  console.log(val)
  floorObj.value = val
})

const fullscreenMenus = ['industryDevelopment', 'qualitySafety', 'integrityManagement', 'wiseConstructionSite']
let timer
watch(
  () => props.menuActive,
  (val) => {
    console.log('watch menuActive', val)
    isLeftExpanded.value = false
    isRightExpanded.value = false
    isFullscreenExpanded.value = false
    floorObj.value = {
      show: false,
    }
    clearTimeout(timer)
    timer = setTimeout(() => {
      currentComponent.value = componentsList[val]
      if (fullscreenMenus.includes(val)) {
        isFullscreenExpanded.value = true
        fullscreenComponent.value = componentsList[val]
        currentComponent.value = { left: null, right: null }
      } else {
        fullscreenComponent.value = null
        if (currentComponent.value.left) {
          isLeftExpanded.value = true
        }
        if (currentComponent.value.right) {
          isRightExpanded.value = true
        }
      }
    }, 500)
  },
)

defineExpose({ changeExpanded })
</script>

<template>
  <div class="layout">
    <div
      :class="['left-wrapper', isLeftExpanded ? 'left-expanded' : '']"
      v-show="currentComponent.left"
    >
      <component
        :key="menuActive"
        :is="currentComponent.left"
        :isExpanded="isLeftExpanded"
        :activePark="activePark"
      />
      <div
        :class="['arrow-wrapper-left']"
        @click="handleArrowChange('left')"
      ></div>
      <SearchLayer :menuActive="menuActive" />
    </div>
    <div
      :class="['right-wrapper', isRightExpanded ? 'right-expanded' : '']"
      v-show="currentComponent.right"
    >
      <component
        :key="menuActive"
        :is="currentComponent.right"
        :isExpanded="isRightExpanded"
        :activePark="activePark"
      />
      <div
        :class="['arrow-wrapper-right']"
        @click="handleArrowChange('right')"
      ></div>
      <map-tools :menuActive="menuActive" />
      <floor-tools :floorObj="floorObj" v-if="floorObj.show" />
    </div>
    <div class="fullscreen-wrapper" :class="[isFullscreenExpanded ? 'fullscreen-expanded' : '']">
      <component
        :key="menuActive"
        :is="fullscreenComponent"
        :isExpanded="isFullscreenExpanded"
        :activePark="activePark"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout {
  position: absolute;
  width: 100%;
  height: 100%;
  // margin-top: var(--hedaer-height);
  // height: calc(100% - var(--hedaer-height));
  // padding: 0 var(--layout-padding-left) var(--layout-padding-bottom) var(--layout-padding-left);
  --card-margin-bottom: 24px;
  pointer-events: none;
  user-select: none;
  z-index: 1001;

  .left-wrapper {
    position: absolute;
    left: -440px;
    top: 0;
    padding: 90px 0 0 20px;
    width: 440px;
    height: 100%;
    pointer-events: all;
    transition: left 0.4s ease-in-out;
    background: linear-gradient(90deg, #071219, rgba(7, 18, 25, 0));

    .arrow-wrapper-left {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 440px;
      width: 16px;
      height: 54px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/bt_z_zk.png');
      pointer-events: all;
      transform: translateY(-50%);
    }
  }

  .left-expanded {
    position: absolute;
    left: 0;
    top: 0;

    .arrow-wrapper-left {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 0px;
      width: 16px;
      height: 54px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/bt_z_sq.png');
      pointer-events: all;
      transform: translateY(-50%);
    }
  }

  .right-wrapper {
    position: absolute;
    padding: 90px 20px 0 0;
    right: -440px;
    width: 440px;
    height: 100%;
    pointer-events: all;
    transition: right 0.4s ease-in-out;
    background: linear-gradient(-90deg, #071219, rgba(7, 18, 25, 0));

    .arrow-wrapper-right {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: -16px;
      width: 16px;
      height: 54px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/bt_y_zk.png');
      z-index: 222;
      transform: translateY(-50%);
    }
  }

  .right-expanded {
    position: absolute;
    right: 0;
    top: 0;

    .arrow-wrapper-right {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 424px;
      width: 16px;
      height: 54px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/bt_y_sq.png');
      z-index: 222;
      transform: translateY(-50%);
    }
  }

  .fullscreen-wrapper {
    position: absolute;
    left: 0;
    bottom: -100%;
    padding: 90px 20px 110px 20px;
    width: 100%;
    height: 100%;
    transition: bottom 0.4s ease-in-out;
    background: linear-gradient(#ffffff00 0%, #ffffff00 9%, #02103Ddd 10%, #132356dd 50%, #02103Ddd 100%);
  }
  .fullscreen-wrapper.fullscreen-expanded {
    bottom: 0;
    pointer-events: all;
  }

  // :deep(.left) {
  //   position: absolute;
  //   top: var(--hedaer-height);
  //   width: 420px;
  //   height: 100%;
  //   z-index: 222;
  //   left: var(--layout-padding-left);
  //   pointer-events: all;
  // }

  // :deep(.right) {
  //   position: absolute;
  //   width: 420px;
  //   top: var(--hedaer-height);
  //   height: 100%;
  //   z-index: 223;
  //   right: var(--layout-padding-left);
  // }
}

// .left-enter-active,
// .left-leave-active {
//   transition: transform .4s ease-in-out;
// }

// .left-enter-from,
// .left-leave-to {
//   transform: translateX(calc(-420px - var(--layout-padding-left)));
// }

// .right-enter-active,
// .right-leave-active {
//   transition: transform .4s ease-in-out;
// }

// .right-enter-from,
// .right-leave-to {
//   transform: translateX(calc(420px + var(--layout-padding-left)));
// }
</style>
